{% extends 'base/base.html' %}

{% block css %}
<style>
    .box {
        width: 960px;
        margin: 0 auto;
        clear: both;
    }

    .box .left {
        width: 190px;
        float: left;
        display: inline;
    }

    .box .left .block {
        border: 1px solid #E4E4E4;
        margin-top: 8px;
        height: 1%;
    }

    .box .left .block .blocktitle {
        line-height: 35px;
        height: 35px;
        background: url(/static/img/header_bg.png) no-repeat;
        background-repeat: repeat-x;
        background-position: 0 -134px;
        text-align: left;
    }

    .box .left .block .blocktitle i {
        width: 12px;
        height: 16px;
        background: url(/static/img/header_bg.png) no-repeat;
        background-position: -101px -210px;
        margin: 12px 10px 0 15px;
    }

    .box .left .block .wsd i {
        background: url(/static/img/header_bg.png) no-repeat;
        background-position: -124px -201px;
        width: 16px;
        margin: 9px 8px 0 10px;
        float: left;
        display: inline;
    }

    .box .left .block .blockcontent {
        line-height: 25px;
        padding: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .box .left .block .blockcontent .rec {
        line-height: 25px;
        padding: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .box .left .block .blockcontent .rec li {
        border-bottom: 1px dotted #F2F2F2;
        padding: 0 3px;
        list-style: decimal inside;
        position: relative;
        font-size: 11px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
    }
    .box .left .block .blockcontent .rec li a {
        font-size : 12px;
        text-decoration: none;
        background-color: transparent;

    }

    .box .left .block .wld i {
        background: url(/static/img/header_bg.png) no-repeat;
        background-position: -124px -224px;
        width: 16px;
        margin: 9px 8px 0 10px;
        float: left;
        display: inline;
    }

    .box .right {
        float: right;
        display: inline;
        width: 760px;
    }
    .box .right .cl{
        margin: 0;
        padding: 0;
        width: 0;
        height: 0;
        line-height: 0;
        font-size: 0;
        clear: both;
    }
    .box .right .bdsub {
        padding: 1px;
        background: #FFFFFF;
        border: 1px solid #E4E4E4;
        margin-top: 5px;
    }

    .main .right .bdsub .content {
        background: url(/static/img/header_bg.png) no-repeat;
        background-position: 0 -506px;
        background-repeat: repeat-x;
        line-height: 30px;
        position: relative;
        width: 800px;
        margin: 0 auto;
        clear: both;
        height: 70px;
        text-align: center;
    }

    .box .right .bdsub .content dt {
        background: url(/static/img/header_bg.png) no-repeat;
        background-position: -114px -170px;
        height: 30px;
        padding-left: 35px;
        font-size: 14px;
        border-bottom: 1px solid #E4E4E4;
        
        font-weight: 700;
    }

    .box .right .bdsub .content dt h2 {
        font-size: 14px;
        font-weight: bold;
        display: inline;
        float: left;
        margin: 0;
        line-height: 30px;
    }

    .box .right .bdsub .content dd {
        padding: 10px 10px 0 10px;
    }
    .box .right .bdsub .content dd .table{
        border: 0;
        margin: 0;
        padding: 0;
    }
    .box .right .bdsub .content dd .table td{
        border: 1px solid #E4E4E4;
    }
    a, a:visited {
    color: #2f468f;
    text-decoration: none;
    position: static;
    }
</style>
{% endblock %}

{% block title %}
<title>
    {% for c2 in cs2 %}
    {{ c2.name }}
    {% endfor %}
</title>
{% endblock %}
{% block body %}
<div class="box">
    <div class="left">
        <div class="block">
            <div class="blocktitle wsd">
                <i></i>
                会员推荐
                {% for c2 in cs2 %}
                {{ c2.name }}
                {% endfor %}
            </div>
            <div class="blockcontent">
                <ul class="rec">
                    {% for c in cr %}
                    <li><a href="#">{{ c.name }}</a></li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        <div class="block">
            <div class="blocktitle wld">
                <i></i>
                排行榜
            </div>
            <div class="blockcontent">
                <ul class="rec">
                    <li style="float: left;"><a href="#" >日点击榜</a></li>
                    <li style="float: left;"><a href="#">周点击榜</a></li>
                    <li style="float: left;"><a href="#">月点击榜</a></li>
                    <li style="float: left;"><a href="#">总点击榜</a></li>
                    <li style="float: left;"><a href="#">日推荐榜</a></li>
                    <li style="float: left;"><a href="#">周推荐榜</a></li>
                    <li style="float: left;"><a href="#">月推荐榜</a></li>
                    <li style="float: left;"><a href="#">总推荐榜</a></li>
                    <li style="float: left;"><a href="#">总收藏榜</a></li>
                    <li style="float: left;"><a href="#">总字数榜</a></li>
                    <li style="float: left;"><a href="#">最新入库</a></li>
                    <li style="float: left;"><a href="#">最近更新</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="right">
        <div class="cl" style="height:8px;"></div>
        <div class="bdtop"></div>
        <div class="bdsub">
            <dl class="content">
                <dt>
                    <h2>
                        {% for c2 in cs2 %}
                        {{ c2.name }}
                        {% endfor %}
                        -文章列表
                    </h2>
                </dt>
                
                <dd>
                    <table style="width:736px;" cellpadding="0" cellspacing="1" class="table">
                        <tbody>
                            <tr style=" background-color: #E4E4E4;"  class="top">
                                <th width="21%" style="text-align: center">文章名称</th>
                                <th width="43%" style="text-align: center">最新章节</th>
                                <th width="13%" style="text-align: center">作者</th>
                                <th width="8%" style="text-align: center">字数</th>
                                <th width="9%" style="text-align: center">更新</th>
                                <th width="6%" style="text-align: center">状态</th>
                            </tr>
                            {% for c in cl %}
                            <tr>
                                <td class="L">
                                    <a href="{% url 'main:detail_category' c.id %}" target="_blank">{{ c.name }}</a>
                                </td>
                                <td class="L">
                                    <a href="#" target="_blank">{{ c.latest_chapter }}</a>
                                </td>
                                <td class="C">{{c.author}}</td>
                                <td class="R">{{c.number}}</td>
                                <td class="C">{{c.last_update_simple}}</td>
                                <td class="C">{{c.status}}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </dd>
            </dl>
            <div class="cl" style="padding-top:10px;"></div>
        </div>
        
    </div>
</div>

{% endblock %}
